/// <reference path="jquery.d.ts" />
/// <reference path="extensions.ts" />

module Game {
    export function init() {

        $(document.body).children().remove();
        var _canvas = <HTMLCanvasElement>document.createElement("canvas");
        var $_canvas = $(_canvas);
        $(document.body).append($_canvas);

        $_canvas.width($(document.body).innerWidth());
        $_canvas.height($(document.body).innerHeight());
        _canvas.width = $_canvas.outerWidth();
        _canvas.height = $_canvas.outerHeight();

        $(document.body).data("Game", {
            canvas: _canvas
        });

        setZones();

    }

    function setZones() {
        var data = <IData>$(document.body).data("Game");

        //die zonen in data speichern mit width height etc.
        //jede zone hat eigene methoden etc

        data.PlayersAllyZone = new AllyZone(0, data.canvas.height * 0.5, data.canvas.width, (data.canvas.height * 0.5) / 3);
        data.PlayersHeroZone = new HeroZone(0, data.canvas.height * 0.5 + (data.canvas.height * 0.5) / 3, data.canvas.width, (data.canvas.height * 0.5) / 3);
        data.PlayersResourceZone = new ResourceZone(0, data.canvas.height - (data.canvas.height * 0.5) / 3, data.canvas.width, (data.canvas.height) / 3);
        data.PlayersHandZone = new HandZone(0, data.canvas.height - data.canvas.height * 0.05, data.canvas.width, data.canvas.height * 0.05);

        data.OpponentsAllyZone = new AllyZone(0, data.canvas.height * 0.5 - (data.canvas.height * 0.5) / 3, data.canvas.width, (data.canvas.height * 0.5) / 3);
        data.OpponentsHeroZone = new HeroZone(0, data.canvas.height * 0.5 - (data.canvas.height) / 3, data.canvas.width, (data.canvas.height * 0.5) / 3);
        data.OpponentsResourceZone = new ResourceZone(0, 0, data.canvas.width, (data.canvas.height * 0.5) / 3);
        data.OpponentsHandZone = new HandZone(0, 0, data.canvas.width, data.canvas.height * 0.05);

        window.requestAnimFrame(renderImage);
    }

    function renderImage(time: number) {
        var data = <IData>$(document.body).data("Game");
        var ctx = data.canvas.getContext("2d");

        ctx.fillStyle = "#0f0";
        ctx.fillRect(data.PlayersAllyZone.X, data.PlayersAllyZone.Y, data.PlayersAllyZone.Width, data.PlayersAllyZone.Height);
        ctx.fillRect(data.OpponentsAllyZone.X, data.OpponentsAllyZone.Y, data.OpponentsAllyZone.Width, data.OpponentsAllyZone.Height);

        ctx.fillStyle = "#00f";
        ctx.fillRect(data.PlayersHeroZone.X, data.PlayersHeroZone.Y, data.PlayersHeroZone.Width, data.PlayersHeroZone.Height);
        ctx.fillRect(data.OpponentsHeroZone.X, data.OpponentsHeroZone.Y, data.OpponentsHeroZone.Width, data.OpponentsHeroZone.Height);

        ctx.fillStyle = "#f00";
        ctx.fillRect(data.PlayersResourceZone.X, data.PlayersResourceZone.Y, data.PlayersResourceZone.Width, data.PlayersResourceZone.Height);
        ctx.fillRect(data.OpponentsResourceZone.X, data.OpponentsResourceZone.Y, data.OpponentsResourceZone.Width, data.OpponentsResourceZone.Height);

        ctx.fillStyle = "#0f0";
        ctx.fillRect(data.PlayersHandZone.X, data.PlayersHandZone.Y, data.PlayersHandZone.Width, data.PlayersHandZone.Height);
        ctx.fillRect(data.OpponentsHandZone.X, data.OpponentsHandZone.Y, data.OpponentsHandZone.Width, data.OpponentsHandZone.Height);
    }

    interface IData {
        canvas: HTMLCanvasElement;
        PlayersAllyZone: AllyZone;
        PlayersHeroZone: HeroZone;
        PlayersResourceZone: ResourceZone;
        PlayersHandZone: HandZone;
        OpponentsAllyZone: AllyZone;
        OpponentsHeroZone: HeroZone;
        OpponentsResourceZone: ResourceZone;
        OpponentsHandZone: HandZone;
    }

    interface IZone {
        X: number;
        Y: number;
        Width: number;
        Height: number;
    }

    class AllyZone implements IZone {
        X: number;
        Y: number;
        Width: number;
        Height: number;
        constructor(x: number, y: number, width: number, height: number) {
            this.X = x;
            this.Y = y;
            this.Width = width;
            this.Height = height;
        }
    }

    class HeroZone implements IZone {
        X: number;
        Y: number;
        Width: number;
        Height: number;
        constructor(x: number, y: number, width: number, height: number) {
            this.X = x;
            this.Y = y;
            this.Width = width;
            this.Height = height;
        }
    }

    class ResourceZone implements IZone {
        X: number;
        Y: number;
        Width: number;
        Height: number;
        constructor(x: number, y: number, width: number, height: number) {
            this.X = x;
            this.Y = y;
            this.Width = width;
            this.Height = height;
        }
    }

    class HandZone implements IZone {
        X: number;
        Y: number;
        Width: number;
        Height: number;
        constructor(x: number, y: number, width: number, height: number) {
            this.X = x;
            this.Y = y;
            this.Width = width;
            this.Height = height;
        }
    }
}

$(document).on("ready", function () {
    Game.init();
});
